<template>
  <div class="tagsView">
    <el-scrollbar :vertical="true">
      <div class="scrollbar-flex-content">
        <p v-for="item in tagsList" :class="{
          'scrollbar-item': true,
          'active': checkSameRoute(item)
        }" @click="updateActiveTag(item)">
          {{ item.title }}
          <el-icon class="tagsClose" v-if="item.name !== 'dashboard'" @click.stop="removeRouteHistoryList(item)">
            <Close />
          </el-icon>
        </p>
      </div>
    </el-scrollbar>
    <el-icon class="tagsReload" @click="updateCurrentRouteDataReloadIndex" title='刷新页面'>
      <Refresh />
    </el-icon>
  </div>
</template>

<script setup>
import {
  getRouteHistoryList,
  removeRouteHistoryList,
  updateCurrentCompanyName,
  updateCurrentRouteDataReloadIndex
} from "@/composition/useRouterLink.js";
import {refreshComponent, routerTo} from "@/utils/index.js";
import {Close, Refresh} from "@element-plus/icons-vue";
import {checkSameRoute} from "@/view/homeView/utils.js";

const tagsList = getRouteHistoryList();
const updateActiveTag = (item) => {
  // 当前选中项不进行任何操作
  if(checkSameRoute(item)) {
    return;
  }
  updateCurrentCompanyName('');
  if(item.type === 'company') {
    updateCurrentCompanyName(item.companyName);
  }
  routerTo(item.name, 3);
};
</script>
<style scoped lang="scss">
.tagsView{
  width: 100%;
  border-bottom: 1px solid $split-line-color;
  height: $tags-view-height;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .scrollbar-flex-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: $tags-view-height + 1px;
    .scrollbar-item {
      flex-shrink: 0;
      height: $tags-view-height;
      display: flex;
      align-items: center;
      padding: 0 10px;
      border-left: 1px solid $split-line-color;
      font-size: 12px;
      cursor: pointer;
      &.active {
        background-color: $leftNav-bg-active-color;
      }
      &:hover {
        color: red;
      }
      &:last-child {
        border-right: 1px solid $split-line-color;
      }
      .tagsClose {
        margin-left: 10px;
      }
    }
  }
  .tagsReload {
    height: $tags-view-height;
    font-size: 12px;
    cursor: pointer;
    width: 52px;
    border-left: 1px solid $split-line-color;
    border-right: 1px solid $split-line-color;
    &:hover {
      color: red;
      background-color: $bg-color-gray;
    }
  }
}
</style>
